<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>用户注册 - 平台账户</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        :root {
            --primary: #3498db;
            --secondary: #2ecc71;
            --warning: #f39c12;
            --danger: #e74c3c;
            --light: #f8f9fa;
            --dark: #343a40;
            --gray: #6c757d;
            --border: #e0e0e0;
            --success: #27ae60;
        }
        
        body {
            font-size: 14px;
            color: #333;
            line-height: 1.6;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            min-height: 100vh;
            padding: 20px 15px 80px;
        }
        
        .container {
            max-width: 500px;
            margin: 0 auto;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px 0;
        }
        
        .logo {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--primary), #1a5f9e);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            color: white;
            font-size: 36px;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }
        
        .header h1 {
            font-size: 24px;
            color: var(--dark);
            margin-bottom: 10px;
        }
        
        .header p {
            color: var(--gray);
            font-size: 14px;
        }
        
        .progress-bar {
            display: flex;
            justify-content: space-between;
            position: relative;
            margin: 30px 0;
        }
        
        .progress-bar::before {
            content: '';
            position: absolute;
            top: 12px;
            left: 0;
            right: 0;
            height: 4px;
            background: #e0e0e0;
            z-index: 1;
        }
        
        .progress-line {
            position: absolute;
            top: 12px;
            left: 0;
            height: 4px;
            background: var(--primary);
            z-index: 2;
            transition: width 0.4s ease;
        }
        
        .progress-step {
            position: relative;
            z-index: 3;
            text-align: center;
            width: 24%;
        }
        
        .step-icon {
            width: 28px;
            height: 28px;
            background: white;
            border: 2px solid #e0e0e0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            font-size: 12px;
            color: var(--gray);
        }
        
        .progress-step.active .step-icon {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
        }
        
        .progress-step.completed .step-icon {
            background: var(--success);
            border-color: var(--success);
            color: white;
        }
        
        .step-label {
            font-size: 12px;
            color: var(--gray);
        }
        
        .progress-step.active .step-label {
            color: var(--primary);
            font-weight: 500;
        }
        
        .form-container {
            background: white;
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }
        
        .form-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
        }
        
        .form-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
            color: var(--dark);
            display: flex;
            align-items: center;
        }
        
        .form-title i {
            margin-right: 10px;
            color: var(--primary);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark);
        }
        
        .input-group {
            position: relative;
        }
        
        .input-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }
        
        .form-control {
            width: 100%;
            padding: 14px 14px 14px 40px;
            border: 1px solid var(--border);
            border-radius: 10px;
            font-size: 15px;
            transition: all 0.3s;
        }
        
        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
            outline: none;
        }
        
        .input-with-btn {
            display: flex;
        }
        
        .input-with-btn .form-control {
            flex: 1;
            border-radius: 10px 0 0 10px;
            padding-right: 10px;
        }
        
        .sms-btn {
            background: #f1f9ff;
            border: 1px solid var(--border);
            border-left: none;
            border-radius: 0 10px 10px 0;
            padding: 0 15px;
            color: var(--primary);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .sms-btn:disabled {
            background: #f5f5f5;
            color: var(--gray);
            cursor: not-allowed;
        }
        
        .radio-group {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 10px;
        }
        
        .radio-card {
            flex: 1;
            min-width: 120px;
            border: 2px solid var(--border);
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .radio-card.selected {
            border-color: var(--primary);
            background: rgba(52, 152, 219, 0.05);
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
        }
        
        .card-title {
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .card-price {
            color: var(--primary);
            font-weight: 700;
            font-size: 16px;
            margin-bottom: 5px;
        }
        
        .card-desc {
            font-size: 12px;
            color: var(--gray);
        }
        
        .info-box {
            background: #f8f9fa;
            border-left: 4px solid var(--primary);
            padding: 12px 15px;
            border-radius: 8px;
            margin: 15px 0;
            font-size: 13px;
        }
        
        .info-box p {
            margin-bottom: 5px;
        }
        
        .info-box strong {
            color: var(--danger);
        }
        
        .btn {
            display: block;
            width: 100%;
            padding: 14px;
            border-radius: 10px;
            border: none;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--primary), #2980b9);
            color: white;
            box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
        }
        
        .btn-primary:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
            box-shadow: none;
        }
        
        .btn-outline {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
            margin-top: 10px;
        }
        
        .hidden {
            display: none;
        }
        
        .payment-methods {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 20px 0;
        }
        
        .payment-method {
            width: 60px;
            height: 40px;
            border: 1px solid var(--border);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: var(--gray);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .payment-method.selected {
            border-color: var(--primary);
            color: var(--primary);
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        .amount-options {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 15px 0;
        }
        
        .amount-option {
            flex: 1;
            min-width: 80px;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .amount-option.selected {
            border-color: var(--primary);
            background: rgba(52, 152, 219, 0.05);
        }
        
        .custom-amount {
            display: flex;
            margin-top: 10px;
        }
        
        .custom-amount .form-control {
            border-radius: 8px 0 0 8px;
            padding-left: 15px;
        }
        
        .custom-amount-btn {
            background: #f1f9ff;
            border: 1px solid var(--border);
            border-left: none;
            border-radius: 0 8px 8px 0;
            padding: 0 15px;
            color: var(--primary);
            font-weight: 500;
        }
        
        .success-container {
            text-align: center;
            padding: 30px 0;
        }
        
        .success-icon {
            width: 80px;
            height: 80px;
            background: var(--success);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            color: white;
            font-size: 36px;
        }
        
        .success-title {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--success);
        }
        
        .success-message {
            color: var(--gray);
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        .footer {
            text-align: center;
            padding: 20px 0;
            color: var(--gray);
            font-size: 12px;
        }
        
        .footer a {
            color: var(--primary);
            text-decoration: none;
        }
        
        .note {
            font-size: 12px;
            color: var(--gray);
            margin-top: 5px;
        }
        
        .required::after {
            content: '*';
            color: var(--danger);
            margin-left: 4px;
        }
        
        @media (max-width: 480px) {
            .form-container {
                padding: 20px 15px;
            }
            
            .radio-card {
                min-width: calc(50% - 10px);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="logo">
                <i class="fas fa-user-plus"></i>
            </div>
            <h1>用户注册</h1>
            <p>加入平台，开启您的创业之旅</p>
        </div>
        
        <div class="progress-bar">
            <div class="progress-line" id="progressLine" style="width: 25%;"></div>
            <div class="progress-step completed" id="step1">
                <div class="step-icon"><i class="fas fa-check"></i></div>
                <div class="step-label">手机验证</div>
            </div>
            <div class="progress-step active" id="step2">
                <div class="step-icon">2</div>
                <div class="step-label">完善资料</div>
            </div>
            <div class="progress-step" id="step3">
                <div class="step-icon">3</div>
                <div class="step-label">会员选择</div>
            </div>
            <div class="progress-step" id="step4">
                <div class="step-icon">4</div>
                <div class="step-label">实名认证</div>
            </div>
        </div>
        
        <!-- 手机验证步骤 -->
        <div class="form-container" id="phoneStep">
            <h2 class="form-title"><i class="fas fa-mobile-alt"></i> 手机号验证</h2>
            
            <div class="form-group">
                <label class="form-label required">手机号码</label>
                <div class="input-group">
                    <div class="input-icon">
                        <i class="fas fa-phone"></i>
                    </div>
                    <input type="tel" class="form-control" id="phoneNumber" placeholder="请输入您的手机号码">
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label required">短信验证码</label>
                <div class="input-with-btn">
                    <div class="input-group">
                        <div class="input-icon">
                            <i class="fas fa-sms"></i>
                        </div>
                        <input type="text" class="form-control" id="smsCode" placeholder="请输入6位验证码">
                    </div>
                    <button class="sms-btn" id="sendSmsBtn">获取验证码</button>
                </div>
                <div class="note">验证码已发送至您的手机，5分钟内有效</div>
            </div>
            
            <button class="btn btn-primary" id="nextToProfile">下一步</button>
        </div>
        
        <!-- 完善资料步骤 -->
        <div class="form-container hidden" id="profileStep">
            <h2 class="form-title"><i class="fas fa-user-edit"></i> 完善个人资料</h2>
            
            <div class="form-group">
                <label class="form-label required">真实姓名</label>
                <div class="input-group">
                    <div class="input-icon">
                        <i class="fas fa-user"></i>
                    </div>
                    <input type="text" class="form-control" id="realName" placeholder="请输入您的真实姓名">
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label required">设置登录密码</label>
                <div class="input-group">
                    <div class="input-icon">
                        <i class="fas fa-lock"></i>
                    </div>
                    <input type="password" class="form-control" id="password" placeholder="设置6-20位登录密码">
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label required">设置交易密码</label>
                <div class="input-group">
                    <div class="input-icon">
                        <i class="fas fa-key"></i>
                    </div>
                    <input type="password" class="form-control" id="tradePassword" placeholder="设置6位数字交易密码">
                </div>
                <div class="note">交易密码用于资金操作，请勿与登录密码相同</div>
            </div>
            
            <div class="form-group">
                <label class="form-label">邀请码 (选填)</label>
                <div class="input-group">
                    <div class="input-icon">
                        <i class="fas fa-user-friends"></i>
                    </div>
                    <input type="text" class="form-control" id="inviteCode" placeholder="请输入邀请人邀请码">
                </div>
            </div>
            
            <div class="info-box">
                <p><strong>重要提示：</strong>除浏览外，其他功能必须实名认证后方能参与，包括提现平台账户款项。</p>
                <p>个人平台提现限制：<strong>2万元/天</strong></p>
                <p>平台商家提现限制：<strong>15万元/天</strong></p>
            </div>
            
            <button class="btn btn-primary" id="nextToMembership">下一步</button>
            <button class="btn btn-outline" id="backToPhone">上一步</button>
        </div>
        
        <!-- 会员选择步骤 -->
        <div class="form-container hidden" id="membershipStep">
            <h2 class="form-title"><i class="fas fa-crown"></i> 选择会员类型</h2>
            
            <div class="radio-group">
                <div class="radio-card" data-type="normal">
                    <div class="card-title">普通会员</div>
                    <div class="card-price">¥0/年</div>
                    <div class="card-desc">平台服务费15%</div>
                </div>
                
                <div class="radio-card selected" data-type="svip">
                    <div class="card-title">SVIP会员</div>
                    <div class="card-price">¥80/年</div>
                    <div class="card-desc">平台服务费8%</div>
                </div>
            </div>
            
            <div id="svipOptions">
                <div class="form-group">
                    <label class="form-label required">选择身份类型</label>
                    <select class="form-control" id="userType">
                        <option value="">请选择您的身份</option>
                        <option value="student">在校高校生 (¥40/年)</option>
                        <option value="social">社会人群 (¥80/年)</option>
                        <option value="veteran">退役军人 (¥40/年)</option>
                    </select>
                </div>
                
                <div class="info-box">
                    <p>SVIP会员可享受更低平台服务费率 (8%)，普通会员服务费为15%</p>
                    <p>在校高校生和退役军人享受优惠价格 <strong>¥40/年</strong></p>
                </div>
            </div>
            
            <button class="btn btn-primary" id="nextToVerification">下一步</button>
            <button class="btn btn-outline" id="backToProfile">上一步</button>
        </div>
        
        <!-- 实名认证步骤 -->
        <div class="form-container hidden" id="verificationStep">
            <h2 class="form-title"><i class="fas fa-id-card"></i> 实名认证</h2>
            
            <div class="form-group">
                <label class="form-label required">身份证号码</label>
                <div class="input-group">
                    <div class="input-icon">
                        <i class="fas fa-id-card"></i>
                    </div>
                    <input type="text" class="form-control" id="idCard" placeholder="请输入18位身份证号码">
                </div>
            </div>
            
            <div class="form-group">
                <label class="form-label required">支付认证费用</label>
                <div class="note">实名认证需支付¥1.00认证费用</div>
                
                <div class="payment-methods">
                    <div class="payment-method selected">
                        <i class="fab fa-alipay"></i>
                    </div>
                    <div class="payment-method">
                        <i class="fab fa-weixin"></i>
                    </div>
                    <div class="payment-method">
                        <i class="fas fa-university"></i>
                    </div>
                </div>
                
                <div class="amount-options">
                    <div class="amount-option" data-amount="5">¥5</div>
                    <div class="amount-option" data-amount="20">¥20</div>
                    <div class="amount-option" data-amount="50">¥50</div>
                    <div class="amount-option" data-amount="100">¥100</div>
                </div>
                
                <div class="custom-amount">
                    <input type="number" class="form-control" id="customAmount" placeholder="输入自定义金额 (50元以上)">
                    <div class="custom-amount-btn">确定</div>
                </div>
                
                <div class="note">最小充值金额¥5，自定义金额需≥¥50</div>
            </div>
            
            <div class="info-box">
                <p><i class="fas fa-exclamation-circle"></i> 实名认证是平台安全的重要保障，认证后即可享受完整平台服务</p>
                <p><i class="fas fa-shield-alt"></i> 您的身份信息将加密存储，仅用于身份验证</p>
            </div>
            
            <button class="btn btn-primary" id="completeRegistration">完成注册并支付</button>
            <button class="btn btn-outline" id="backToMembership">上一步</button>
        </div>
        
        <!-- 注册成功页面 -->
        <div class="form-container hidden" id="successStep">
            <div class="success-container">
                <div class="success-icon">
                    <i class="fas fa-check"></i>
                </div>
                <h2 class="success-title">注册成功！</h2>
                <p class="success-message">
                    恭喜您已完成注册并成功通过实名认证！<br>
                    您现在可以享受平台所有服务功能。<br>
                    立即开始您的创业之旅吧！
                </p>
                <button class="btn btn-primary">进入平台首页</button>
                <button class="btn btn-outline">完善个人资料</button>
            </div>
        </div>
        
        <div class="footer">
            <p>© 2023 创业服务平台 | <a href="#">用户协议</a> | <a href="#">隐私政策</a></p>
            <p>客服电话：400-888-8888 | 工作日 9:00-18:00</p>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 步骤控制变量
            let currentStep = 2;
            const totalSteps = 4;
            const progressLine = document.getElementById('progressLine');
            
            // 更新进度条
            function updateProgress() {
                const progress = (currentStep - 1) / (totalSteps - 1) * 75 + 25;
                progressLine.style.width = progress + '%';
                
                // 更新步骤状态
                for (let i = 1; i <= totalSteps; i++) {
                    const step = document.getElementById('step' + i);
                    step.classList.remove('active', 'completed');
                    
                    if (i < currentStep) {
                        step.classList.add('completed');
                    } else if (i === currentStep) {
                        step.classList.add('active');
                    }
                }
            }
            
            // 显示当前步骤
            function showStep(stepNumber) {
                document.getElementById('phoneStep').classList.add('hidden');
                document.getElementById('profileStep').classList.add('hidden');
                document.getElementById('membershipStep').classList.add('hidden');
                document.getElementById('verificationStep').classList.add('hidden');
                document.getElementById('successStep').classList.add('hidden');
                
                if (stepNumber === 1) {
                    document.getElementById('phoneStep').classList.remove('hidden');
                } else if (stepNumber === 2) {
                    document.getElementById('profileStep').classList.remove('hidden');
                } else if (stepNumber === 3) {
                    document.getElementById('membershipStep').classList.remove('hidden');
                } else if (stepNumber === 4) {
                    document.getElementById('verificationStep').classList.remove('hidden');
                } else {
                    document.getElementById('successStep').classList.remove('hidden');
                }
            }
            
            // 下一步按钮事件
            document.getElementById('nextToProfile').addEventListener('click', function() {
                currentStep = 2;
                updateProgress();
                showStep(currentStep);
            });
            
            document.getElementById('nextToMembership').addEventListener('click', function() {
                currentStep = 3;
                updateProgress();
                showStep(currentStep);
            });
            
            document.getElementById('nextToVerification').addEventListener('click', function() {
                currentStep = 4;
                updateProgress();
                showStep(currentStep);
            });
            
            // 上一步按钮事件
            document.getElementById('backToPhone').addEventListener('click', function() {
                currentStep = 1;
                updateProgress();
                showStep(currentStep);
            });
            
            document.getElementById('backToProfile').addEventListener('click', function() {
                currentStep = 2;
                updateProgress();
                showStep(currentStep);
            });
            
            document.getElementById('backToMembership').addEventListener('click', function() {
                currentStep = 3;
                updateProgress();
                showStep(currentStep);
            });
            
            // 完成注册
            document.getElementById('completeRegistration').addEventListener('click', function() {
                currentStep = 5;
                updateProgress();
                showStep(currentStep);
            });
            
            // 会员类型选择
            const memberCards = document.querySelectorAll('.radio-card');
            memberCards.forEach(card => {
                card.addEventListener('click', function() {
                    memberCards.forEach(c => c.classList.remove('selected'));
                    this.classList.add('selected');
                    
                    const type = this.dataset.type;
                    document.getElementById('svipOptions').style.display = 
                        type === 'svip' ? 'block' : 'none';
                });
            });
            
            // 支付方式选择
            const paymentMethods = document.querySelectorAll('.payment-method');
            paymentMethods.forEach(method => {
                method.addEventListener('click', function() {
                    paymentMethods.forEach(m => m.classList.remove('selected'));
                    this.classList.add('selected');
                });
            });
            
            // 金额选择
            const amountOptions = document.querySelectorAll('.amount-option');
            amountOptions.forEach(option => {
                option.addEventListener('click', function() {
                    amountOptions.forEach(o => o.classList.remove('selected'));
                    this.classList.add('selected');
                });
            });
            
            // 发送验证码按钮
            const sendSmsBtn = document.getElementById('sendSmsBtn');
            sendSmsBtn.addEventListener('click', function() {
                let count = 60;
                sendSmsBtn.disabled = true;
                sendSmsBtn.textContent = `重新发送(${count}s)`;
                
                const timer = setInterval(() => {
                    count--;
                    sendSmsBtn.textContent = `重新发送(${count}s)`;
                    
                    if (count <= 0) {
                        clearInterval(timer);
                        sendSmsBtn.disabled = false;
                        sendSmsBtn.textContent = '获取验证码';
                    }
                }, 1000);
            });
            
            // 初始化页面
            updateProgress();
            showStep(currentStep);
        });
    </script>
</body>
</html>